import classnames from 'classnames'
import { differenceBy } from 'lodash'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useInitialState } from '@/utils/hooks'
import { getAllChannels, changeActive, addChannel, delChannel } from '@/store/actions/home'
import {Channel} from '@/types/data'
import { useState } from 'react'
import { Toast } from 'antd-mobile'

type Props = {
  onHide: () => void
}

const Channels = ({onHide}: Props) => {

  const {userChannels, activeKey} = useSelector((state: RootState) => state.home)
  const {allChannels} = useInitialState(getAllChannels, 'home')

  const optionsChannels = differenceBy(allChannels, userChannels, 'id')

  const dispatch = useDispatch();

  const [isEdit, setIsEdit] = useState(false);

  const changeActiveKey = (key: number) => {
    dispatch(changeActive(key))
    onHide()
  }

  const add = (channel: Channel) => {
    dispatch(addChannel(channel))
  }

  const toggleEdit = () => {
    setIsEdit(!isEdit)
  }

  const remove = (channel: Channel) => {
    if (userChannels.length <= 4) {
      return Toast.show('至少保留四个频道')
    }
    dispatch(delChannel(channel))
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onHide}/>
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', {edit: isEdit})}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {isEdit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span
              className="channel-item-edit"
              onClick={toggleEdit}
            >
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {userChannels.map((channel) => (
              // {/* 选中时，添加类名 selected */}
              <span
                key={channel.id}
                className={
                  classnames('channel-list-item', {selected: channel.id === activeKey})
                }
                onClick={() => {
                  if (isEdit) {
                    return
                  }
                  changeActiveKey(channel.id)
                }}
              >
                {channel.name}
                {
                  channel.id !== 0
                  && <Icon type="iconbtn_tag_close" onClick={() => {
                    remove(channel)
                  }}/>
                }
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {optionsChannels.map((channel) => (
              <span
                key={channel.id}
                className="channel-list-item"
                onClick={() => {
                  add(channel)
                }}
              >
                + {channel.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
